<template>
  <el-dialog
    title="创建主题会议"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="dialog"
    width="656px"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="top"
      class="ruleForm"
    >
      <el-form-item label="直播名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入直播名称"></el-input>
      </el-form-item>
      <el-form-item label="直播描述" prop="description">
        <el-input
          placeholder="请输入直播描述"
          type="textarea"
          :rows="3"
          resize="none"
          v-model="ruleForm.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          style="width: 100%"
          v-model="ruleForm.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          style="width: 100%"
          v-model="ruleForm.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择结束时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">
        创 建
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addTeachRoom } from '@/api/teach';
import { getUserInfo } from '@/utils/auth'

export default {
  name: 'AddFrom',
  props: {
    teachId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        name: '', // 名称
        description: '', // 简介
        startTime: '',
        endTime: '',
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        description: [
          { required: true, message: '请填写简介', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    userInfo() {
      return getUserInfo() || {}
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const params = {
              ...this.ruleForm,
              teachId: this.teachId
            };
            await addTeachRoom(params);
            this.dialogVisible = false;
            this.$message.success('创建成功');
          } catch (error) {
            console.error(error);
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
  }
  .avatar-uploader {
    margin-top: 20px;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #c8c8c8;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  .cover-uploader {
    .cover-uploader-icon {
      font-size: 28px;
      color: #c8c8c8;
      width: 326px;
      height: 196px;
      line-height: 196px;
      text-align: center;
    }
    .cover {
      width: 326px;
      height: 196px;
      display: block;
    }
  }
}
</style>
